<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<increate-count :name="name" v-on:change="changeCount">
				<h3>你好，我是slot的内容提供者</h3>
			</increate-count>
		</div>
		<template id="count">
			<div>
				<div v-on:click='increate'>这是一个组件{{name}}</div>
				<slot></slot>
			</div>
		</template>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('increateCount',{
				data:function () {
					return {
						count:0
					}
				},
				props:{
					name:String
				},
				template:"#count",
				methods:{
					increate(){
						this.$data.count++
						this.$emit('change',this.$data.count)
						
					}
				}
			})
			let app=new Vue({
				el:'#app',
				data:{
					name:'admin'
				},
				methods:{
					changeCount(e){
						console.log('changeCount:'+e);
					}
				},
				components:{
					
				}
			})
		</script>
	</body>
</html>
